<template>
	<view class="input-dialog">
		<view class="title">
			<text>{{title}}</text>
			<image class="close" src="@/static/close.png" @click="emits('onCancel')"></image>
		</view>
		<input class="input" :placeholder="placeholder"/>
		<view class="divider"></view>
		<view class="btns flexr justify-center">
			<view class="btn cancel-button" @click="emits('onCancel')">
				取消
			</view>
			<view class="btn primary-button" @click="emits('onConfirm')">
				确定
			</view>
		</view>
	</view>
</template>

<script setup>
defineProps({
	title: String,
	placeholder: String,
})
const emits = defineEmits(['onCancel', 'onConfirm'])
</script>

<style lang="scss">
.input-dialog {
	width: calc(100vw - 64rpx);
	padding-bottom: 26rpx;
	border-radius: 30rpx;
	overflow: hidden;
	.title {
		height: 95rpx;
		min-height: 95rpx;
		position: relative;
		line-height: 95rpx;
		text-align: center;
		font-size: 36rpx;
		background-color: $divider-color2;
	}
	.close {
		width: 95rpx;
		height: 95rpx;
		padding: 30rpx;
		box-sizing: border-box;
		position: absolute;
		right: 0;
		top: 0;
	}
	.input {
		border: 1px solid $primary-color;
		height: 95rpx;
		min-height: 95rpx;
		border-radius: 15rpx;
		margin: 31rpx 24rpx;
		font-size: 32rpx;
		padding: 0 25rpx;
		color: $primary-color;
	}
	.btns {
		margin-top: 20rpx;
		.btn {
			width: 300rpx;
		}
		.btn + .btn {
			margin-left: 30rpx;
		}
	}
}
</style>
